<template>
    <div>
        <div
            id="displayScreenContainer"
            style="width: 100%; height: 100vh; background: #070f2b;"
        />
        <!-- 左右两侧 -->
        <div class="ltContainer">
            <div class="indexLt">
                <div class="indexLtItem">
                    <div class="titleBarIcon flex">
                        <div>未处理隐患</div>
                        <div class="flex">
                            <div @click="jumpToHiddenDanger" class="moreBtn">
                                更多
                            </div>
                            <el-popover
                                placement="top-start"
                                :width="200"
                                trigger="hover"
                                content="最新10条未处理隐患"
                            >
                                <template #reference>
                                    <i
                                        class="el-icon-question questionIcon"
                                    ></i>
                                </template>
                            </el-popover>
                        </div>
                    </div>
                    <div class="indexLtItemFooter" style="height: 2px;">
                        <div class="scrollTable">
                            <el-scrollbar ref="scrollbar">
                                <div
                                    v-for="item in hiddenDangerList"
                                    :key="item.id + 222"
                                    class="scrollTableSection"
                                    style="cursor: pointer;"
                                    @click="jumpToHiddenDangerDetail(item.id)"
                                >
                                    <div class="scrollTableSectionTitle">
                                        {{ item.point_name }}
                                        <span>{{ item.check_remark }}</span>
                                    </div>
                                    <div class="scrollTableSectionBox">
                                        <div class="scrollTableSectionItem">
                                            {{ item.danger_level }}
                                        </div>
                                        <div class="scrollTableSectionItem">
                                            {{ $getTime(item.create_time) }}
                                        </div>
                                        <div
                                            class="scrollTableSectionItem"
                                            style="
                                                color: rgb(255, 236, 63);
                                                width: 30%;
"
                                        >
                                            {{ item.effect_ids }}
                                        </div>
                                    </div>
                                </div>
                            </el-scrollbar>
                            <!-- </div> -->
                        </div>
                    </div>
                </div>
                <div class="indexLtItem">
                    <div class="titleBarIcon flex">
                        <div>今日巡查统计</div>
                        <div class="flex">
                            <div @click="jumpToPatrol" class="moreBtn">
                                更多
                            </div>
                            <el-popover
                                placement="top-start"
                                :width="200"
                                trigger="hover"
                                content="当日不同时段的巡查任务数量统计"
                            >
                                <template #reference>
                                    <i
                                        class="el-icon-question questionIcon"
                                    ></i>
                                </template>
                            </el-popover>
                        </div>
                    </div>
                    <div
                        class="indexLtItemSectionChart"
                        ref="todayPatrolStatisticsChart"
                    ></div>
                </div>
                <div class="indexLtItem">
                    <div class="titleBarIcon flex">
                        <div>周报警/预警/故障趋势图</div>
                        <el-popover
                            placement="top-start"
                            :width="200"
                            trigger="hover"
                            content="当前近7天的火警、事件、故障数量统计"
                        >
                            <template #reference>
                                <i class="el-icon-question questionIcon"></i>
                            </template>
                        </el-popover>
                    </div>
                    <div
                        class="indexLtItemSectionChart"
                        ref="weekBjYjGzChart"
                    ></div>
                </div>
            </div>
        </div>
        <div class="rtContainer">
            <div class="indexRt colFlex">
                <div class="indexRtItem">
                    <div class="titleBarIcon flex">
                        <div>今日火警/预警/故障</div>
                        <div class="flex">
                            <div style="width: 80px;">
                                <el-select
                                    v-model="method"
                                    filterable
                                    clearable
                                    placeholder="更多"
                                    size="mini"
                                    @change="yuJingBoBaoList"
                                >
                                    <el-option
                                        v-for="item in moreMenuList"
                                        :key="item.key"
                                        :label="item.label"
                                        :value="item.key"
                                    >
                                    </el-option>
                                </el-select>
                            </div>
                            <el-popover
                                placement="top-start"
                                :width="200"
                                trigger="hover"
                                content="当前0点起始至当前时间的火警、预警、故障数量"
                            >
                                <template #reference>
                                    <i
                                        class="el-icon-question questionIcon"
                                    ></i>
                                </template>
                            </el-popover>
                        </div>
                    </div>
                    <div
                        class="indexRtItemSectionChart"
                        ref="cardLineChart"
                    ></div>
                </div>
                <div class="indexRtItem">
                    <div class="titleBarIcon flex" style="margin-bottom: 0;">
                        <div>历史报警列表</div>
                        <div class="flex">
                            <div
                                @click="yuJingBoBaoList(3, '')"
                                class="moreBtn"
                            >
                                更多
                            </div>
                            <el-popover
                                placement="top-start"
                                :width="200"
                                trigger="hover"
                                content="显示最近10条告警信息（包含火警及预警信息）"
                            >
                                <template #reference>
                                    <i
                                        class="el-icon-question questionIcon"
                                    ></i>
                                </template>
                            </el-popover>
                        </div>
                    </div>
                    <div class="indexRtItemFooter" style="height: 2px;">
                        <div class="scrollTable">
                            <el-scrollbar ref="scrollbar">
                                <div
                                    @mouseenter="scrollMouseenter"
                                    @mouseleave="scrollMouseleave"
                                >
                                    <template v-if="wlwGjDataList.length">
                                        <div
                                            v-for="item in wlwGjDataList"
                                            :key="item.id + 222"
                                            class="scrollTableSection"
                                            style="cursor: pointer;"
                                            @click="lookDetails(item)"
                                        >
                                            <div
                                                class="scrollTableSectionTitle"
                                            >
                                                {{ item.yj_unit_name }}
                                            </div>
                                            <div class="scrollTableSectionBox">
                                                <div
                                                    class="scrollTableSectionItem"
                                                >
                                                    火警
                                                </div>
                                                <div
                                                    class="scrollTableSectionItem"
                                                >
                                                    {{
                                                        $getDateTime(
                                                            item.create_time
                                                        )
                                                    }}
                                                </div>
                                                <div
                                                    class="scrollTableSectionItem"
                                                    style="
                                                        color:
                                                            rgb(
                                                                255,
                                                                236,
                                                                63
                                                            );
"
                                                >
                                                    {{
                                                        item.status == 1
                                                            ? '未处理'
                                                            : '已处理'
                                                    }}
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                    <template v-else>
                                        <el-empty :image-size="100"></el-empty>
                                    </template>
                                </div>
                            </el-scrollbar>
                            <!-- </div> -->
                        </div>
                    </div>
                </div>
                <div class="indexRtItem">
                    <div class="titleBarIcon flex">
                        <div>联网设备在线情况</div>
                        <el-popover
                            placement="top-start"
                            :width="200"
                            trigger="hover"
                            content="在线网关/独立式设备的在线/离线数量统计"
                        >
                            <template #reference>
                                <i class="el-icon-question questionIcon"></i>
                            </template>
                        </el-popover>
                    </div>
                    <div class="indexRtItemSection flex">
                        <div class="indexRtItemSectionChartItemBox">
                            <div
                                ref="networkOnlineDeviceInfo"
                                class="indexRtItemSectionChartItem"
                            ></div>
                            <div class="indexRtItemSectionChartItemBoxSubTitle">
                                <div>在线数</div>
                                <div>{{ onlineDownlineData.online }}</div>
                            </div>
                        </div>

                        <div class="indexRtItemSectionChartItemBox">
                            <div
                                ref="networkDownlineDeviceInfo"
                                class="indexRtItemSectionChartItem"
                            ></div>
                            <div class="indexRtItemSectionChartItemBoxSubTitle">
                                <div>离线数</div>
                                <div>{{ onlineDownlineData.downline }}</div>
                            </div>
                            <!-- realTimeStatisticsDatathis.wlwGjDataTotal -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footContainer">
            <div class="footBox">
                <div class="footHeader">
                    <el-popover
                        placement="top-start"
                        :width="200"
                        trigger="hover"
                        content="当前火警/预警/故障/事件/隐患/设备（当前隐患：当前行业单位中不为验收合格状态的隐患数据）"
                    >
                        <template #reference>
                            <i class="el-icon-question questionIcon"></i>
                        </template>
                    </el-popover>
                </div>
                <div class="footGroup">
                    <div class="footBoxInfoItem">
                        <span>报警总数</span>
                        <span class="footBoxInfoItemRedFont">{{
                            realTimeStatisticsData.method_bj
                        }}</span>
                        <span>条</span>
                    </div>
                    <div class="footBoxInfoItem">
                        <span>故障总数</span>
                        <span class="footBoxInfoItemRedFont">{{
                            realTimeStatisticsData.method_gz
                        }}</span>
                        <span>条</span>
                    </div>
                    <div class="footBoxInfoItem">
                        <span>预警总数</span>
                        <span class="footBoxInfoItemRedFont">{{
                            realTimeStatisticsData.method_yj
                        }}</span>
                        <span>条</span>
                    </div>
                    <div class="footBoxInfoItem">
                        <span>当前隐患</span>
                        <span class="footBoxInfoItemYellowFont">{{
                            realTimeStatisticsData.danger_wcl
                        }}</span>
                        <span>条</span>
                    </div>
                    <div class="footBoxInfoItem">
                        <span>设备总数</span>
                        <span class="footBoxInfoItemYellowFont">{{
                            realTimeStatisticsData.device_total
                        }}</span>
                        <span>台</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="indexHeader">
            <div style="width: 100%;">
                <el-row>
                    <el-col :span="8" style="visibility: hidden;">
                        <div class="indexHeaderSubTitle">
                            {{ weatherData.weather }}天&nbsp;{{
                                weatherData.temperature
                            }}度&nbsp;空气湿度{{ weatherData.humidity }}&nbsp;{{
                                weatherData.windDirection
                            }}风{{ weatherData.windPower }}级
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="indexHeaderTitle">{{ headerTitle }}</div>
                    </el-col>
                    <el-col :span="8">
                        <div
                            class="indexHeaderSubTitle"
                            style="text-align: right; justify-content: flex-end;"
                        >
                            <span style="visibility: hidden;">{{
                                localTime
                            }}</span>
                            <img
                                src="/src/assets/images/backBtn.png"
                                class="backBtn"
                                @click="backToWlw"
                            />
                            <i
                                class="el-icon-full-screen fullScreenBtn"
                                @click="fullScreenEvent"
                            ></i>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="blueDialog" :class="bjInfoDialogVisiable ? 'bjDialog' : ''">
            <el-dialog
                v-model="dialogDetails"
                width="20%"
                destroy-on-close
                class="detailsDialog"
                :modal="false"
                @closed="bjInfoDialogVisiableClosed"
            >
                <deviceReportShow
                    :details="details"
                    :isAll="false"
                ></deviceReportShow>
            </el-dialog>
        </div>
        <el-dialog v-model="hiddenDangerDialog" width="60%" destroy-on-close>
            <el-scrollbar style="height: 70vh; width: 100%;">
                <hiddenDangerMange
                    :isDialog="true"
                    @showDetailDialog="jumpToHiddenDangerDetail"
                ></hiddenDangerMange>
            </el-scrollbar>
        </el-dialog>
        <el-dialog
            v-model="hiddenDangerDetailDialog"
            width="60%"
            destroy-on-close
        >
            <el-scrollbar style="height: 70vh; width: 100%;">
                <hiddenDangerRecord :danger_id="danger_id"></hiddenDangerRecord>
            </el-scrollbar>
        </el-dialog>
        <el-dialog v-model="yuJingBoBaoListDialog" width="70%" destroy-on-close>
            <yuJingBoBao
                :yuJingType="yuJingType"
                :yuJingStatus="yuJingStatus"
            ></yuJingBoBao>
        </el-dialog>
        <el-dialog
            v-model="unitInfoDialogVisible"
            width="70%"
            destroy-on-close
            @open="getVideo"
        >
            <el-tabs
                v-model="videoTypeActiveName"
                type="card"
                @tab-click="getVideo"
                height="50vh"
            >
                <el-tab-pane
                    :label="item.name"
                    :name="item.id"
                    v-for="item in videoMoldType"
                    :key="item.id"
                >
                    <template v-if="unitVideos.length">
                        <div v-for="(item, index) in unitVideos" :key="index">
                            <div :id="'player' + index"></div>
                            <div
                                @click="playVideo(item.video_url)"
                                class="unitVideoBox"
                            >
                                <i
                                    class="el-icon-video-play"
                                    style="font-size: 50px;"
                                ></i>
                                <span>{{ item.device_no }}</span>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <el-empty :image-size="100"></el-empty>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
        <el-dialog
            v-model="playVideoBoxDialog"
            append-to-body
            width="50%"
            class="detailsDialog"
        >
            <iframe
                :src="playingVideoUrl"
                style="width: 100%; height: 50vh;"
                frameborder="0"
            ></iframe>
        </el-dialog>

        <!-- <el-dialog :visible.sync="unitInfoDialogVisible" width="90%" class="detailsDialog">
      <unitInfo v-if="unitInfoDialogVisible" :unitId="unit_id"></unitInfo>
    </el-dialog> -->
    </div>
</template>

<script>
import Echarts from '@/util/echarts'
import { markRaw } from 'vue'
import { setDeviceData } from '@/util/deviceData'
import storage from '@/util/storage'
// 标识组件
import deviceReportShow from '@/views/xfSupervise/components/deviceReportShow.vue'

import buildMap from '@/assets/images/buildMap.png'
import buildMapWarning from '@/assets/images/buildMapWarning.gif'
import hiddenDangerMange from '@/views/hiddenDanger/hiddenDangerMange.vue'
import hiddenDangerRecord from '@/views/hiddenDanger/hiddenDangerRecord.vue'
import yuJingBoBao from '@/views/xfSupervise/components/yuJingBoBao.vue'
// import unitInfo from "@/views/displayScreen/components/unitInfo.vue";

// const alarmAudio = document.getElementById("alarm_audio");
export default {
    data() {
        return {
            headerTitle: '',
            buildingInfoWindow: '',
            displayScreenMap: '',
            localTime: '',
            polygons: [],
            weatherData: '',
            warnList: [],
            details: {},
            gridData: [],
            method: '',
            yuJingBoBaoListDialog: false,
            tableDataInfo: '',
            wlwGjDataTotal: '',
            dialogDetails: false,
            height: '',
            wlwGjDataList: [],
            cardLineChart: '',
            networkOnlineDeviceInfo: '',
            onlineDownlineData: '',
            weekBjYjGzChart: '',
            weekBjYjGzChartData: [],
            hiddenDangerList: [],
            todayPatrolStatisticsChart: '',
            todayPatrolStatisticsChartData: '',
            bjInfoDialogVisiable: false,
            hiddenDangerDetailDialog: false,
            hiddenDangerDialog: false,
            danger_id: '',
            yuJingType: '',
            yuJingStatus: '',
            moreMenuList: [
                { label: '火警', key: 3 },
                { label: '预警', key: 1 },
                { label: '故障', key: 2 }
            ],
            isInit: true,
            realTimeStatisticsData: '',
            isFullscreen: false,
            wsTimer: 0,
            unitInfoDialogVisible: false,
            videoTypeActiveName: '',
            unitVideos: [],
            playingVideoUrl: '',
            playVideoBoxDialog: false
        }
    },
    components: {
        deviceReportShow,
        hiddenDangerMange,
        hiddenDangerRecord,
        yuJingBoBao
    },
    beforeUnmount() {
        clearInterval(this.wsTimer)
        this.wsTimer = 0
        this.displayScreenMap.clearMap()
        this.displayScreenMap.destroy()
        setTimeout(() => {
            // alarmAudio.pause();
        }, 10)
    },
    created() {
        this.getWeather()
        this.getHiddenDangerDataList()
        this.getWlwGjDataList()
        this.getVideoMold()
    },
    async mounted() {
        this.renderMap()
        clearInterval(this.wsTimer)
        // alarmAudio.pause();
        this.wsTimer = setInterval(() => {
            this.$ws.wsSend({ api: 'unit/Hbyl/warning' }, async (res) => {
                if (res.code == 200) {
                    clearInterval(this.wsTimer)
                    this.wsTimer = 0
                }
                if (res.type != 'unit/Hbyl/warning') return
                let { data } = res
                this.wlwGjDataTotal = data?.total || {}
                this.renderCardLineChart()

                if (
                    !this.bjInfoDialogVisiable &&
                    Number(res.data.warnList.length)
                ) {
                    let temp = await setDeviceData([res.data.warnList[0]], 3)
                    this.lookDetails(temp[0])
                    this.bjInfoDialogVisiable = true
                }
                //...
                this.$ws.wsSend(
                    { api: 'unit/PublicShow/pcIndex' },
                    async (res) => {
                        if (res.type !== 'unit/PublicShow/pcIndex') return
                        let { method_bj, method_yj, method_gz } = res.data.total
                        this.realTimeStatisticsData = res.data.total
                        // if (method_bj || method_yj || method_gz) alarmAudio.play();
                        // else alarmAudio.pause();
                        if (!this.isInit) return
                        this.$nextTick(() => {
                            this.init()
                            this.isInit = false
                        })
                    }
                )
            })
        }, 1000)
        this.$nextTick(() => {
            this.scrollMethod()
        })
        await this.getOnlineDownlineData()
        await this.getWeekBjYjGzChartData()
        this.renderWeekBjYjGzChart()
        this.renderNetworkOnlineDeviceInfo()
        this.renderNetworkDownlineDeviceInfo()
        await this.getTodayPatrolStatisticsChartData()
        this.renderTodayPatrolStatisticsChart()
    },
    beforeRouteEnter(to, from, next) {
        next((vm) => {
            let a_token = storage.local.get('a_token')
            let u_token = storage.local.get('u_token')
            console.log('vm', vm)
            if (a_token && u_token && !vm.$ws._ws) {
                vm.$ws.initWs()
            }
        })
        let getUrlKey = (name) => {
            return (
                decodeURIComponent(
                    (new RegExp(
                        '[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)'
                    ).exec(location.href) || [, ''])[1].replace(/\+/g, '%20')
                ) || null
            )
        }
        let username = getUrlKey('user')
        let password = getUrlKey('pwd')
        if (username && password) {
            store
                .dispatch('user/auth', { appid: 'sccdxf', appkey: '123456' })
                .then((res) => {
                    store
                        .dispatch('user/login', { username, password })
                        .then(() => {
                            location.href = '/'
                            next()
                        })
                        .catch((e) => {
                            console.log(e)
                        })
                })
                .catch((err) => {
                    console.log(err)
                })
        } else {
            next()
        }
    },
    beforeUnmount() {
        this.$ws.handleWsClose()
        if (this.isFullscreen) this.fullScreenEvent()
    },
    methods: {
        playVideo(url) {
            //视频播放
            if (!url) {
                this.$message.error('视频连接错误，请稍后再试')
                return false
            }
            this.playingVideoUrl = url
            this.playVideoBoxDialog = true
        },
        getVideoMold() {
            this.$api
                .post('/unit/DeviceBase/nameTree', { mold_id: 30 })
                .then((res) => {
                    res.data.map((curVal) => {
                        curVal.id = String(curVal.id)
                    })
                    this.videoMoldType = res.data
                    this.videoTypeActiveName = res.data[0]['id'] //初始默认选中
                })
        },
        getVideo() {
            //获取最新的 消防通道的巡查结果
            this.$api
                .post('/unit/DeviceInstall/unitVideo', {
                    name_id: this.videoTypeActiveName
                })
                .then((res) => {
                    this.unitVideos = res.data
                })
        },
        showVideoListDialog(e) {
            this.unitInfoDialogVisible = true
        },
        fullScreenEvent() {
            let element = document.documentElement
            if (this.isFullscreen) {
                if (document.exitFullscreen) {
                    document.exitFullscreen()
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen()
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen()
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen()
                }
            } else {
                if (element.requestFullscreen) {
                    element.requestFullscreen()
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen()
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen()
                } else if (element.msRequestFullscreen) {
                    // IE11
                    element.msRequestFullscreen()
                }
            }
            this.isFullscreen = !this.isFullscreen
        },
        //历史报警
        async getWlwGjDataList() {
            let params = {
                rows: 10
                // method: 3,
            }
            let resp = await this.$api.post('/unit/DeviceWarning/Lists', params)
            this.wlwGjDataList = await setDeviceData(resp.data.list, 3)
        },
        jumpToPatrol() {
            const newUrl = this.$router.resolve({
                name: 'unitTaskMange'
            })
            window.open(newUrl.href, '_blank')
            // this.$router.push({name:'unitTaskMange'})
        },
        bjInfoDialogVisiableClosed() {
            this.bjInfoDialogVisiable = false
        },
        yuJingBoBaoList(type, status) {
            this.yuJingType = type
            this.yuJingStatus = status || 1
            if (type) {
                this.yuJingBoBaoListDialog = true
            }
        },
        jumpToHiddenDanger() {
            this.hiddenDangerDialog = true
        },
        jumpToHiddenDangerDetail(id) {
            this.danger_id = id
            this.hiddenDangerDetailDialog = true
        },
        getHiddenDangerDataList() {
            this.$api
                .post('/unit/Danger/Lists', {
                    rows: 10,
                    status: 1
                })
                .then((res) => {
                    this.hiddenDangerList = res.data.list
                })
        },
        renderTodayPatrolStatisticsChart() {
            this.todayPatrolStatisticsChart = markRaw(
                Echarts.init(this.$refs.todayPatrolStatisticsChart)
            )
            let tempData = this.todayPatrolStatisticsChartData
            let xAxisData = []
            let seriesData = []
            for (let key in tempData) {
                xAxisData.push(key)
                seriesData.push(tempData[key])
            }
            let option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xAxisData,
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                yAxis: {
                    type: 'value',
                    splitLine: { show: false },
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                },
                grid: {
                    top: '5%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                series: [
                    {
                        data: seriesData,
                        type: 'line',
                        smooth: true
                    }
                ]
            }
            this.todayPatrolStatisticsChart.setOption(option)
        },
        getTodayPatrolStatisticsChartData() {
            return new Promise((resolve) => {
                this.$api.post('/unit/PatrolInfo/todayTotal').then((res) => {
                    this.todayPatrolStatisticsChartData = res.data
                    resolve()
                })
            })
        },
        getWeekBjYjGzChartData() {
            return new Promise((resolve) => {
                this.$api
                    .post('/unit/DeviceWarning/total', {
                        total_type: ['method_field', 'date_count'],
                        last_month_week: 1,
                        rows: 100
                    })
                    .then((res) => {
                        this.weekBjYjGzChartData = res.data.list
                        resolve()
                    })
            })
        },
        renderWeekBjYjGzChart() {
            this.weekBjYjGzChart = markRaw(
                Echarts.init(this.$refs.weekBjYjGzChart)
            )
            let tempData = this.weekBjYjGzChartData
            let xAxisData = []
            let seriesBjData = []
            let seriesYjData = []
            let seriesGzData = []
            tempData.map((curVal) => {
                xAxisData.push(curVal.date_lite)
                seriesBjData.push(curVal.method_bj)
                seriesYjData.push(curVal.method_yj)
                seriesGzData.push(curVal.method_gz)
            })
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                grid: {
                    top: '5%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxisData,
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        splitLine: { show: false },
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '报警',
                        type: 'line',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: seriesBjData
                    },
                    {
                        name: '预警',
                        type: 'line',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: seriesYjData
                    },
                    {
                        name: '故障',
                        type: 'line',
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        },
                        data: seriesGzData
                    }
                ]
            }
            this.weekBjYjGzChart.setOption(option)
        },
        getOnlineDownlineData() {
            return new Promise((resolve) => {
                this.$api.post('/unit/PublicShow/pcIndex').then((res) => {
                    this.onlineDownlineData = res.data.total
                    resolve()
                })
            })
        },
        renderNetworkDownlineDeviceInfo() {
            this.networkDownlineDeviceInfo = markRaw(
                Echarts.init(this.$refs.networkDownlineDeviceInfo)
            )
            let tempData = this.onlineDownlineData
            let option = {
                color: ['rgb(232,151,10)', '#D8D8D8'],
                title: {
                    text:
                        (
                            (Number(tempData.downline) /
                                Number(tempData.total)) *
                            100
                        ).toFixed(0) + '%',
                    left: 'center',
                    top: '50%',
                    textStyle: {
                        color: 'rgb(232,151,10)',
                        fontSize: 20,
                        align: 'center'
                    }
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            }
                        },
                        data: [
                            { value: tempData.online, name: '在线' },
                            { value: tempData.downline, name: '离线' }
                        ]
                    }
                ]
            }
            this.networkDownlineDeviceInfo.setOption(option)
        },
        renderNetworkOnlineDeviceInfo() {
            this.networkOnlineDeviceInfo = markRaw(
                Echarts.init(this.$refs.networkOnlineDeviceInfo)
            )
            let tempData = this.onlineDownlineData
            let option = {
                color: ['rgb(136,176,75)', '#D8D8D8'],
                title: {
                    text:
                        (
                            (Number(tempData.online) / Number(tempData.total)) *
                            100
                        ).toFixed(0) + '%',
                    left: 'center',
                    top: '50%',
                    textStyle: {
                        color: 'rgb(136,176,75)',
                        fontSize: 20,
                        align: 'center'
                    }
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            }
                        },
                        data: [
                            { value: tempData.online, name: '在线' },
                            { value: tempData.downline, name: '离线' }
                        ]
                    }
                ]
            }
            this.networkOnlineDeviceInfo.setOption(option)
        },
        renderCardLineChart() {
            this.cardLineChart = markRaw(Echarts.init(this.$refs.cardLineChart))
            let tempData = this.wlwGjDataTotal
            let option = {
                xAxis: {
                    type: 'category',
                    data: ['火警', '预警', '故障'],
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '0%',
                    top: '3%',
                    containLabel: true
                },
                splitLine: {
                    show: false
                },
                yAxis: {
                    type: 'value',
                    show: false
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                series: [
                    {
                        barWidth: 30,
                        data: [
                            {
                                itemStyle: {
                                    color: 'rgba(210, 34, 40, 0.57)'
                                },
                                value: tempData.method_bj,
                                type: 3
                            },
                            {
                                itemStyle: {
                                    color: 'rgba(255, 169, 0, 0.48)'
                                },
                                value: tempData.method_yj,
                                type: 1
                            },
                            {
                                itemStyle: {
                                    color: 'rgba(1, 213, 222, 0.3)'
                                },
                                value: tempData.method_gz,
                                type: 2
                            }
                        ],
                        type: 'bar',
                        label: {
                            align: 'center',
                            position: 'insideBottom',
                            show: true
                        }
                    }
                ]
            }
            this.cardLineChart.setOption(option)
            this.cardLineChart.on('click', (param) => {
                this.yuJingBoBaoList(param.data.type, 1)
            })
        },
        //   鼠标移入
        scrollMouseenter() {
            clearInterval(this.timer)
        },
        // 鼠标移出
        scrollMouseleave() {
            this.scrollMethod()
        },
        // 滚动事件
        scroll(e) {
            this.height = e.target.scrollTop
        },
        //   预警播报自动滚动
        scrollMethod() {
            let el = this.$refs['scrollbar'].wrap
            this.scrollbar = el
            el.addEventListener('scroll', this.scroll)
            this.timer = setInterval(() => {
                this.height += 1
                // 设置滚动条
                el.scrollTop = this.height
                // 当滚动到底部，回到顶部
                if (
                    Math.ceil(el.scrollTop) + el.clientHeight ==
                    el.scrollHeight
                ) {
                    el.scrollTop = 0
                    this.height = 0
                }
            }, 150)
        },
        //   详情
        lookDetails(row) {
            this.details = row
            this.dialogDetails = true
        },
        backToWlw() {
            this.$router.go(-1)
        },
        getWeather() {
            AMap.plugin('AMap.Weather', () => {
                let weather = new AMap.Weather()
                // 查询实时天气信息, 查询的城市到行政级别的城市，如朝阳区、杭州市
                weather.getLive('攀枝花市', (err, res) => {
                    this.weatherData = res
                    if (err) {
                        this.getWeather()
                    }
                })
            })
        },
        getUnitArea() {
            let that = this
            let _unit_info = JSON.parse(storage.local.get('unit_info'))
            let temp = this.polygons
            temp.map((curVal) => {
                curVal.setMap(null)
            })
            this.polygons = []
            let district = new AMap.DistrictSearch({
                subdistrict: 0, // 返回下一级行政区
                showbiz: true // 最后一级返回街道信息
            }) // 注意：需要使用插件同步下发功能才能这样直接使用
            district.setLevel('district') // 行政区级别
            district.setExtensions('all')
            district.search(_unit_info.region_name, function (status, result) {
                that.displayScreenMap.remove(that.polygons)
                let bounds = result.districtList[0].boundaries
                if (bounds) {
                    for (let i = 0, l = bounds.length; i < l; i++) {
                        //生成行政区划polygon
                        let polygon = new AMap.Polygon({
                            strokeWeight: 1,
                            path: bounds[i],
                            fillOpacity: 0.4,
                            fillColor: '#80d8ff',
                            strokeColor: '#0091ea'
                        })
                        that.polygons.push(polygon)
                    }
                }
                that.displayScreenMap.add(that.polygons)
                that.displayScreenMap.setFitView(that.polygons)
            })
        },
        async init() {
            await this.renderMap()
            // this.getUnitArea();
        },
        renderMap() {
            this.buildingInfoWindow = new AMap.InfoWindow({
                offset: new AMap.Pixel(0, -30),
                isCustom: true
            })
            let _unit_info = JSON.parse(storage.local.get('unit_info'))
            this.headerTitle = _unit_info.name
            let map = new AMap.Map('displayScreenContainer', {
                resizeEnable: true,
                rotateEnable: true,
                pitchEnable: true,
                mapStyle: 'amap://styles/blue',
                // showLabel: false,
                pitch: 40,
                rotation: -15,
                // viewMode: "3D", // 开启3D视图,默认为关闭
                buildingAnimation: true, // 楼块出现是否带动画
                expandZoomRange: true,
                zoom: 18,
                zooms: [8, 22],
                center: [_unit_info.longitude, _unit_info.latitude]
            })

            this.map = map

            let newIcon = new AMap.Icon({
                image:
                    this.realTimeStatisticsData.method_bj > 0
                        ? buildMapWarning
                        : buildMap,
                size: new AMap.Size(50, 63),
                imageSize: new AMap.Size(50, 63)
            })
            let marker = new AMap.Marker({
                position: [_unit_info.longitude, _unit_info.latitude],
                map: map,
                icon: newIcon
            })
            console.log('_unit_info', _unit_info)
            marker.on('click', this.showVideoListDialog)
            AMapUI.loadUI(['control/BasicControl'], function (BasicControl) {
                var traffic = new BasicControl.Traffic({
                    showButton: false,
                    theme: 'normal'
                })
                //   map.addControl(traffic);
            })
            this.displayScreenMap = map
        }
    }
}
</script>

<style lang="scss" scoped>
.unitVideoBox {
    cursor: pointer;
    width: 200px;
    height: 200px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border-radius: 4px;
    border: 1px solid #d1cccc;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fullScreenBtn {
    font-size: 25px;
    margin-left: 10px;
    cursor: pointer;
}
.moreBtn {
    margin-right: 10px;
    cursor: pointer;
}
.questionIcon {
    font-size: 20px;
    cursor: pointer;
    color: #78f2ff;
}
.blueDialog {
    :v-deep(.el-dialog) {
        background-color: rgba(20, 31, 59, 0.9);
        color: #fff;
    }
}
.bjDialog {
    :v-deep(.el-dialog) {
        position: absolute;
        right: 25%;
    }
}
.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.componentSectionBottom {
    height: 50vh;
    margin-top: 18px;
    padding: 0.5%;
    display: flex;
    flex-direction: column;
    color: #fff;
    .componentSectionBottomTableTop {
        padding: 0.5% 0;
        font-size: 18px;
        font-weight: 400;
        table {
            cursor: default;
            width: 100%;
            text-align: center;
            background-color: rgb(39, 104, 136, 0.83);
        }
    }
    .componentSectionBottomTableMiddle {
        flex-grow: 1;
        margin-bottom: 0.3%;
        table {
            width: 100%;
            text-align: center;
            border-collapse: collapse;
            font-size: 16px;
            font-weight: 400;
            tr {
                cursor: pointer;
                td {
                    padding: 0.5% 0;
                }
                &:nth-child(even) {
                    background-color: rgb(39, 104, 136, 0.3);
                }
                &:hover {
                    background: rgba(37, 132, 255, 0.73);
                }
            }
        }
    }
    .componentSectionBottomTableBottom {
        display: flex;
        justify-content: center;
    }
}
.ltContainer {
    padding-left: 30px;
    position: absolute;
    top: 5%;
    left: 0;
    width: 22%;
    height: 95%;
    padding-top: 1%;
    padding-bottom: 1%;
    background:
        linear-gradient(
            to left,
            rgba(7, 15, 43, 0),
            rgba(7, 15, 43, 0.5)
        );
}
.rtContainer {
    padding-right: 30px;
    position: absolute;
    top: 5%;
    right: 0;
    width: 22%;
    height: 95%;
    padding-top: 1%;
    padding-bottom: 1%;
    background:
        linear-gradient(
            to right,
            rgba(7, 15, 43, 0),
            rgba(7, 15, 43, 0.5)
        );
}
.footContainer {
    position: absolute;
    bottom: 6%;
    left: 25%;
    width: 50%;
    height: 16%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    .footBox {
        height: 80%;
        border-radius: 6px;
        box-shadow: inset 0 0 25px rgb(79, 200, 255, 0.5);
        background-color: rgb(3, 52, 71, 0.5);
        padding: 10px 25px;
        color: #fff;
        font-size: 16px;
        .footHeader {
            display: flex;
            justify-content: flex-end;
        }
        .footGroup {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .footBoxInfoItem {
                width: 33%;
                display: flex;
                align-items: center;
                .footBoxInfoItemRedFont {
                    font-size: 25px;
                    color: #ed4848;
                    font-weight: 900;
                    margin: 0 5px;
                }
                .footBoxInfoItemYellowFont {
                    font-size: 25px;
                    color: #f7be35;
                    font-weight: 900;
                    margin: 0 5px;
                }
            }
        }
    }
}
.checkBox {
    .checkBoxItem {
        width: 60%;
        margin-bottom: 10px;
        color: #929292;
        border: 1px solid #349fd6;
        padding: 6px;
        text-align: center;
        border-radius: 10px;
        cursor: pointer;
    }
}
.titleBarIcon {
    height: 30px;
    width: 100%;
    background: url('/src/assets/images/titleBar.png') no-repeat;
    background-size: 100% 100%;
    padding-left: 10%;
    margin-bottom: 17px;
    font-weight: bold;
    color: #78f2ff;
    :v-deep(.el-input--suffix input) {
        background-color: #082e5e;
        border-color: #082e5e;
        color: #fff;
    }
    :v-deep(.el-select-dropdown) {
        background-color: #082e5e;
        border: none;
        width: 100%;
    }
    .el-select-dropdown__item {
        color: #f8f8f8;
    }
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background-color: #00b4ff;
    }
}
.indexHeader {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 30px;
    height: 7%;
    background-image: url('/src/assets/images/headerImg.png');
    display: flex;
    align-items: center;
    .indexHeaderTitle {
        font-size: 29px;
        font-weight: bold;
        color: #666;
        background: linear-gradient(0deg, #b0caff 0%, #fff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
    }
    .indexHeaderSubTitle {
        font-size: 20px;
        font-weight: 400;
        color: #fff;
        text-decoration: none;
        display: flex;
        align-items: center;
        .backBtn {
            width: 25px;
            margin-left: 10px;
            cursor: pointer;
        }
    }
}
#containers {
    z-index: 100;
    width: 100%;
    height: 100%;
}
.indexLt,
.indexRt {
    cursor: default;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    .indexLtItem,
    .indexRtItem {
        // background-color: rgba(0, 0, 0, 0.4);
        background-image: url(@/assets/images/backimg.png);
        background-size: 100% 100%;
        &:last-child {
            margin-bottom: 0;
        }
        &.danger {
            position: relative;
        }

        flex: 1;
        color: #fff;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        height: 100%;
        .indexLtItemHeader,
        .indexRtItemHeader {
            font-size: 22px;
            font-weight: bold;
            color: #77f1fe;
            text-align: center;
            margin-bottom: 10px;
        }
        .flex {
            display: flex;
        }
        .colFlex {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .indexRtItemSectionChart,
        .indexLtItemSectionChart {
            width: 100%;
            flex-grow: 1;
            height: 100%;
        }
        .indexLtItemSection,
        .indexRtItemSection {
            width: 100%;
            flex-grow: 1;

            // height: 100%;
            .listItem {
                padding: 7px 15px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background:
                    linear-gradient(
                        90deg,
                        #16699b 0%,
                        rgba(30, 176, 252, 0) 100%
                    );
                margin-bottom: 9px;
            }
            .processBox {
                flex-grow: 1;
                margin: 0 25px 0 10px;
                color: #fff;
                height: 10px;
                background: rgb(255, 255, 255, 0.2);
                border-radius: 10px;
                overflow: hidden;
            }
            .processItem {
                background:
                    linear-gradient(
                        to right,
                        rgba(33, 66, 234),
                        rgb(61, 221, 255)
                    );
                height: 10px;
            }
            .indexLtItemSectionContent,
            .indexRtItemSectionContent {
                display: flex;
                align-items: flex-end;
                margin-bottom: 10px;
            }
            .indexRtItemSectionChartItemBox {
                width: 50%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                .indexRtItemSectionChartItemBoxSubTitle {
                    width: 80%;
                    text-align: center;
                    background-color: rgb(51, 74, 104);
                    padding: 2px 4px;
                    border-left: 2px solid rgb(0, 116, 153);
                    border-right: 2px solid rgb(0, 116, 153);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
                .indexRtItemSectionChartItem {
                    width: 100%;
                    height: 90%;
                }
            }
            .indexLtItemSectionColChartItem {
                width: 100%;
                height: 100%;
            }
            .indexLtItemSectionLineChart {
                width: 100%;
                flex-grow: 1;
                height: 100%;
            }
        }
        .cardGroup {
            width: 100%;
            display: flex;
            justify-content: space-between;
            .cardItem {
                width: 30%;
                cursor: pointer;
                .cardItemContent {
                    text-align: center;
                    padding: 4px 0 4px 0;
                    font-size: 25px;
                    font-weight: bold;
                    color: #fff;
                }
                .cardItemFooter {
                    padding: 4px 0;
                    text-align: center;
                    font-size: 12px;
                }
            }
        }
        .indexLtItemFooter,
        .indexRtItemFooter {
            flex-grow: 1;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-top: 10px;
            height: 100%;
            .indexLtItemFooterItem {
                width: 33%;
                display: flex;
                flex-direction: column;
                align-items: center;
                .indexLtItemFooterItemTitle {
                    color: #fff;
                }
            }
            .indexLtItemFooterData {
                width: 80%;
                padding: 6px 0;
                text-align: center;
                border-radius: 10px;
                background:
                    linear-gradient(
                        to bottom,
                        rgba(34, 81, 140, 0),
                        rgba(34, 81, 140, 0.89)
                    );
                cursor: pointer;
                color: #56b9ff;
            }
            .scrollTable {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                .scrollTableHeader {
                    padding: 3px 10px 3px 5px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background: #002e73;
                    color: #59f2fd;
                    .scrollTableHeaderItem {
                        flex: 1;
                        text-align: center;
                    }
                }
                .scrollTableSection {
                    padding: 6px 6px 6px 11px;
                    margin-bottom: 20px;
                    background-color: rgb(44, 83, 103);
                    .scrollTableSectionTitle {
                        font-size: 20px;
                        margin-bottom: 5px;
                        & span {
                            font-size: 14px;
                        }
                    }
                    .scrollTableSectionBox {
                        display: flex;
                        justify-content: space-between;
                        .scrollTableSectionItem {
                            text-align: center;
                        }
                    }
                }
            }
        }
    }
}
</style>
<style>
body {
    margin: 0;
}
.amap-logo {
    display: none;
    opacity: 0 !important;
}
.amap-copyright {
    opacity: 0;
}
</style>
